<template>
  <div>
    <div class="top">
      <p class="right">
        服务热线 1010-9898
        <br />
        服务时间 9.00-22.00
      </p>
      <router-link to="/">
        <img onerror="nofind()" src="../assets/logo.png" class="logo" />
      </router-link>
    </div>
    <div class="main">
      <div class="main_logo">
        <div class="main_logo_top">
          <div class="li active blue">普通登录</div>
        </div>
        <div class="main_logo_m">
          <div class="main_logo_input">
            <div class="ul">
              <div class="main_logo_input_1">
                <i class="iconfont icon-zhanghao"></i>
                <input
                  v-model="phone"
                  name="phone"
                  id="user_name"
                  type="text"
                  placeholder="请输入登录名/手机号/邮箱"
                />
              </div>
              <div class="main_logo_input_1">
                <i class="iconfont icon-mima"></i>
                <input
                  v-model="upwd"
                  name="password"
                  id="password"
                  type="password"
                  placeholder="请输入密码"
                  onpaste="return false"
                />
              </div>
              <div class="main_logo_input_1yzm">
                <div class="main_logo_input_1">
                  <i class="iconfont icon-yanzhengma"></i>
                  <input
                    v-model="yzm"
                    type="text"
                    placeholder="请输入验证码"
                    id="txtVCImg"
                  />
                </div>
                <div
                  class="yanzhengma_wrap"
                  style="margin-top: 12px"
                  title="看不清，换一张"
                >
                  <img
                    onerror="nofind()"
                    class="yzm"
                    src="//u.uzai.com/Reg/code?guid=55db575b-acb7-44d2-85fb-fd4369369539"
                    alt="看不清，换一张"
                    id="ckGetCode"
                    onclick='javascript: this.src = "'
                  />
                </div>
                <div class="clear"></div>
              </div>
              <div class="forget">
                <a href="http://127.0.0.1:8848/%E7%99%BB%E5%BD%95/a.html"
                  >忘记密码?</a
                >
                <div class="remember">
                  <i class="iconfont icon-checkbank">记住我</i>
                </div>
                <div class="clear"></div>
              </div>
              <button
                @click="getLogin"
                class="login"
                id="login"
                style="outline: none !important"
              >
                登录
              </button>
              <!-- <input class="login" id="login" value="登录" onclick="check()" /> -->
              <p class="login_tips"><span id="tip"></span></p>
            </div>
          </div>
          <div class="main_logo_r">
            <p>还没众信悠哉网账号?</p>
            <router-link to="/reg" class="register">立即注册-&gt;</router-link>
            <p class="mart60">使用社交账号登录</p>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="foot">
      <a href="">众信旅游</a>
      <a href="">众信历程</a>
      <a href="">众信品牌</a>
      <a href="">营业网点</a>
      <a href="">诚聘英才</a>
      <a href="">商务合作</a>
      <br />
      <a>Copyright©2005-2018 Uzai.com&nbsp;&nbsp;&nbsp;&nbsp;</a>
      <a>许可证编号:L-TJ-CJ00059&nbsp;&nbsp;&nbsp;&nbsp;</a>
      <a>津ICP备18003064号&nbsp;&nbsp;&nbsp;&nbsp;</a>
      <a>悠哉呼叫中心来电显示号码为：10086110</a>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      phone: "",
      upwd: "",
      yzm: "",
    };
  },
  methods: {
    getLogin() {
      var url = `http://127.0.0.1:3000/v1/users/login?phone=${this.phone}&upwd=${this.upwd}`;
      console.log("url:", url);
      this.axios.get(url).then(res => {
        console.log(res);
        if ((res.data.code == 200) & (this.yzm !== "")) {
          this.$alert("欢迎浏览秋游记网站", "登录成功", {
            confirmButtonText: "确定",
            // callback: action => {
            //   this.$message({
            //     type: "success",
            //     message: `欢迎: ${action}`,
            //   });
            // },
          });

          // 触发vuex中指定的函数
          this.$store.commit("updatePhone", this.phone);
          this.$router.push("/");
        } else {
          this.$alert("用户名或者密码或者验证码错误", "登录失败", {
            confirmButtonText: "确定",
            // callback: action => {
            //   this.$message({
            //     type: "error",
            //     message: `抱歉: ${action}`,
            //   });
            // },
          });
          //清空数据
          (this.phone = ""), (this.upwd = ""), (this.yzm = "");
        }
      });
    },
  },
};
// function check() {
//   if (document.getElementById("user_name").value == "") {
//     alert("请输入登录名/手机号/邮箱！");
//     return false;
//   } else if (document.getElementById("password").value == "") {
//     alert("请输入密码！");
//     return false;
//   } else if (document.getElementById("txtVCImg").value == "") {
//     alert("请输入验证码!");
//   } else {
//     alert("登录成功！");
//     window.location.href = "http://127.0.0.1:8848/%E7%99%BB%E5%BD%95/a.html";
//     return true;
//   }
// }
</script>
<style lang="scss" scoped>
.top {
  width: 1000px;
  margin: auto;
  height: 100px;
}
.top p.right {
  float: right;
  margin-right: 10px;
  margin-top: 40px;
  color: chocolate;
}
a {
  text-decoration: none;
  color: #000;
}
.top img.logo {
  float: left;
  margin-left: 10px;
  margin-top: 15px;
}

.main {
  position: relative;
  height: 540px;
  background: url(//r.uzaicdn.com/content/store/images/user/main.jpg) no-repeat
    center;
}
.main_logo {
  width: 460px;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  margin-left: 45px;
  top: 128px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  padding: 25px 32px;
  padding-right: 0;
  padding-bottom: 10px;
}
.main_logo_top {
  overflow: hidden;
}
.main_logo_top .li.blue {
  padding-bottom: 10px;
  background: url(//r.uzaicdn.com/content/store/images/user/nav.png) no-repeat
    bottom center;
}
.main_logo_top .li.blue:hover {
  color: blue;
}
.main_logo_top .li.active {
  font-size: 18px;
}
.main_logo_top .li {
  color: #000;
  float: left;
  line-height: 24px;
  cursor: pointer;
}
.main_logo_m {
  padding-top: 10px;
}
.main_logo_input {
  float: left;
  width: 250px;
  padding-right: 34px;
}
element.style {
  display: block;
}
.main_logo_input_1 {
  border: 1px solid #e5e5e5;
  height: 20px;
  border-radius: 5px;
  margin-top: 10px;
  padding: 5px 10px;
  position: relative;
}
.main_logo_input_1 i {
  color: #d9d9d9;
  font-size: 18px;
  float: left;
  margin-right: 5px;
}
em,
i {
  font-style: normal;
}
.main_logo_input_1 input {
  width: 200px;
  font-size: 12px;
  line-height: 18px;
  border: 0px;
}
input {
  outline: 0;
}
.main_logo_input_1 {
  border: 1px solid #e5e5e5;
  height: 20px;
  border-radius: 5px;
  margin-top: 10px;
  padding: 5px 10px;
  position: relative;
}
.main_logo_input_1 i {
  color: #d9d9d9;
  font-size: 18px;
  float: left;
  margin-right: 5px;
}
em,
i {
  font-style: normal;
}
.main_logo_input_1 input {
  width: 200px;
  font-size: 12px;
  line-height: 18px;
}
input {
  outline: 0;
}
.main_logo_input_1yzm .main_logo_input_1 {
  float: left;
}
.main_logo_input_1 {
  border: 1px solid #e5e5e5;
  height: 20px;
  border-radius: 5px;
  margin-top: 10px;
  padding: 5px 10px;
  position: relative;
}
.main_logo_input_1 i {
  color: #d9d9d9;
  font-size: 18px;
  float: left;
  margin-right: 5px;
}
.icon-yanzhengma {
  font-size: 15px !important;
  margin-top: 2px;
}
em,
i {
  font-style: normal;
}
.main_logo_input_1yzm .main_logo_input_1 input {
  width: 80px;
}
.main_logo_input_1 input {
  width: 200px;
  font-size: 12px;
  line-height: 18px;
}
input {
  outline: 0;
}
element.style {
  margin-top: 12px;
}
.yanzhengma_wrap {
  width: 110px;
  display: inline-block;
  height: 28px;
  margin-left: 12px;
  cursor: pointer;
}
.yanzhengma_wrap img {
  width: 100%;
  height: 100%;
}
.clear,
.clearfix {
  clear: both;
}
.clear:after,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.main_logo_input .forget {
  margin-top: 10px;
}
.main_logo_input .forget a {
  color: #666;
  font-size: 12px;
  float: right;
}
.main_logo_input .forget a:hover {
  color: red;
}
a {
  text-decoration: none;
  color: #000;
}
.main_logo_input .forget .remember {
  color: #666;
  font-size: 12px;
  cursor: pointer;
  line-height: 16px;
}
.main_logo_input .forget .remember i.icon-checkbank {
  color: black;
  font-size: 12px !important;
  margin-top: 2px;
}
.main_logo_input .forget .remember i.icon-checkbank:hover {
  color: blue;
}
.main_logo_input .forget .remember i {
  margin-right: 5px;
  font-size: 12px;
}
em,
i {
  font-style: normal;
}
.clear,
.clearfix {
  clear: both;
}
.clear:after,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.main_logo_input .login {
  color: #fff;
  line-height: 36px;
  font-size: 14px;
  text-align: center;
  background: chocolate;
  margin-top: 10px;
  border-radius: 18px;
  cursor: pointer;
  width: 249px;
  border: none;
}
.main_logo_input .login:hover {
  background-color: #fbb957;
}
.login_tips {
  text-align: center;
  height: 18px;
  padding-top: 8px;
}
.login_tips span {
  color: #fb284b;
  font-size: 12px;
  text-align: center;
}
.main_logo_r {
  float: left;
  width: 120px;
  padding-left: 30px;
  padding-top: 48px;
  border-left: 1px solid #e5e5e5;
  padding-bottom: 14px;
}
.main_logo_r p:hover {
  color: skyblue;
}
.main_logo_r p {
  font-size: 12px;
  color: #666;
}
.main_logo_r a.register {
  font-size: 14px;
  color: chocolate;
  margin-top: 10px;
  display: block;
}
.main_logo_r a.register:hover {
  color: red;
  font-size: 16px;
}
a {
  text-decoration: none;
  color: #000;
}
.main_logo_r p.mart60 {
  margin-top: 60px;
}
.main_logo_r p {
  font-size: 12px;
  color: #666;
}
.foot {
  margin-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}
.foot a:hover {
  color: skyblue;
  font-size: 16px;
}
.foot p:hover {
  color: skyblue;
}
.foot a {
  font-size: 14px;
  color: #666;
  padding: 0 3px;
  line-height: 30px;
}
a {
  text-decoration: none;
  color: #000;
}
.foot p {
  color: #999;
  font-size: 12px;
  line-height: 17px;
}
</style>
